<!DOCTYPE html>
<html lang="en">
<script src="/js/echarts.min.js"></script>
<script src="/js/dark.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/vue.js"></script>
<body class="layui-layout-body">
    <div class="layui-row">
        <div id="main" style="width: 400px;height:400px;"></div>
    </div>
</body>
<script>
    new Vue({
        data:{
            chart: echarts.init(document.getElementById('main')),
            option: {
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '系统指标',
                        type: 'gauge',
                        detail: {formatter:'{value}%'},
                        data: [{value: 0, name: '总内存:0MB',use: 0}]
                    }
                ]
            }

        },
        methods :{
            updateM: function () {
                var vm = this;
                axios({
                    url: '/sys/info',
                    method:'GET',
                    headers: {'Content-Type':'application/json;charset=utf-8'}
                }).then(function (res) {
                    if (res.data.code == 200){
                        var d = res.data.data;
                        vm.option.series[0].data[0].value = d.m;
                        vm.option.series[0].data[0].use = d.u;
                        vm.option.series[0].data[0].name = '使用内存:'+d.u+'MB\n总内存:'+d.t+'MB'
                        vm.chart.setOption(vm.option, true);
                    }
                }).catch(function (reason) {
                    console.error(reason)
                })
            }
        },
        created: function () {
            var vm = this;
            vm.chart.setOption(vm.option, true);
            setInterval(function () {
                vm.updateM();
            },5000);
        }
    });
</script>
</html>